<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户详情页面</title>
		<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
		<link rel="stylesheet" type="text/css" href="../../css/default.css">
		<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
		<script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
		<script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<script type="text/javascript">
			$.fn.serializeJson=function(){  
	            var serializeObj={};  
	            //得到表单所有的数据（包含空值）
	            var array=this.serializeArray();  
	            var str=this.serialize();  
	            $(array).each(function(){  
	            	//表单中可能有多个相同的name，那么在json即serializeObj中插入第一个label后，还要继续插入，
	            	//那么这时候serializeObj[name]在serializeObj中就已经存在，所以你要把serializeObj[name]做嵌套数组处理
	                //判断该name属性是否在serializeObj中存在
	                if(serializeObj[this.name]){
	                	//判断该name是否已经添加到数组
	                    if($.isArray(serializeObj[this.name])){  
	                    	//是，则添加到数组如：{name,[值1,值2,值3]}
	                        serializeObj[this.name].push(this.value);  
	                    }else{  
	                    	//不是，创建{name,[值1]}
	                        serializeObj[this.name]=[serializeObj[this.name],this.value];  
	                    }  
	                }else{  
	                	//第一次在serializeObj中插入name {"name":"值"}
	                    serializeObj[this.name]=this.value;   
	                }  
	            });  
	            return serializeObj;  
	        }; 
			
			
			$(function(){
				$("body").css({visibility:"visible"});
				// 注册按钮事件 重置
				$('#reset').click(function() {
					$('#form').form("clear");
				});
				// 注册所有下拉控件
				$("select").combobox( {
					width : 155,
					listWidth : 180,
					editable : true
				});
				// 注册ajax查询
				$('#ajax').click(function() {
					//调用自定义方法将searchForm表单数据转换为{key：value}
					var parms = $("#searchForm").serializeJson();
					alert(JSON.stringify(parms));
					//将json数据绑定到datagrid上调用load方法进行条件查询
//					$("#grid").datagrid("load",parms);
					//ifrom嵌套页面，父页面获取子页面的内容
					var elWin = $("#list").get(0).contentWindow;
					elWin.$('#grid').datagrid( "load",parms
//						pagination : true,
//						url : "../../user_findAll.action"
					);
				});
			});
		</script>
	</head>

	<body class="easyui-layout" style="visibility:hidden;">
		<div region="east" title="查询条件" icon="icon-forward" style="width:180px;overflow:auto;" split="false" border="true">
			<div class="datagrid-toolbar">
				<a id="reset" href="#" class="easyui-linkbutton" plain="true" icon="icon-reload">重置</a>
			</div>

			<form id="searchForm" method="post" action="../../user_findAll.action">
				<table class="table-edit" width="100%">
					<tr>
						<td>
							<b>用户名</b><span class="operator"><a name="username-opt" opt="all"></a></span>
							<input type="text" id="username" name="username" />
						</td>
					</tr>
					<tr>
						<td>
							<b>性别</b><span class="operator"><a name="gender-opt" opt="all"></a></span>
							<select id="gender" name="gender">
								<option value=""></option>
								<option value="0">女</option>
								<option value="1">男</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>
							<b>生日</b><span class="operator"><a name="birthday-opt" opt="date"></a></span>
							<input type="text" id="birthday" name="birthday" class="easyui-datebox" />
							<br/>
							<!--<input type="text" id="_birthday2" name="_birthday2" value="1988-11-11" class="easyui-datebox" />-->
						</td>
					</tr>

				</table>
			</form>

			<div class="datagrid-toolbar">
				<a id="ajax" href="#" class="easyui-linkbutton" plain="true" icon="icon-search">查询</a>
			</div>
		</div>
		<div region="center" style="overflow:hidden;" border="false">
			<iframe id="list" src="./userlist.html" scrolling="no" style="width:100%;height:100%;border:0;"></iframe>
		</div>
	</body>

</html>